<template>
	<view>
		<view class="project_tj_item" @click="go_object_jd(itemData)">
			<view class="top">
				{{itemData.title}}
			</view>
			<view class="flexContainer">
				<u-tag :text="itemData.companyLeader"  mode="light" type="primary"/>
				<u-tag :text="itemData.company"  mode="light" type="primary"/>
				<u-tag :text="itemData.state | getState"></u-tag>
				<u-tag :text="itemData.state == 101 ? '已超时' : itemData.state==100 ? '已结束' : '进行中'" mode="light" :type="itemData.state == 101 ? 'error' : itemData.state==100 ? 'success' : 'primary'"/>
				<u-tag :text="itemData.investTotal + '万元'"></u-tag>
				<u-tag
					v-if="itemData.industry"
					:text="itemData.industry">
				</u-tag>
			</view>
			<view class="progessContainer">
					<view>
						<view>年度投资完成进度</view>
						<u-line-progress active-color="#2cabff" :percent="itemData.other.yearRatio > 100 ? 100 : itemData.other.yearRatio" height="35">
						</u-line-progress>
					</view>
					
					<view>
						<view>总体投资完成进度</view>
						<u-line-progress active-color="#7badc2" :percent="itemData.other.ratio > 100 ? 100 : itemData.other.ratio" height="35">
						</u-line-progress>
					</view>				
			</view>
			<view class="bottom">
				<view>{{itemData.expectStartTime}}</view>	
				<view>{{itemData.expectEndTime}}</view>
			</view>
			<u-button @click="openModal(itemData)">
				投资进度
			</u-button>
		</view>
		<u-modal v-model="modalShow" title="投资进度填写" :show-cancel-button='true' @confirm='confirmLeader'>
			<view class="modalContainer">
				<u-picker mode="time" v-model="endShow" :params="params" @confirm="ensureEndTime"></u-picker>
				<u-button @click="getEndTime" :hair-line="false" :custom-style="{
					position: 'relative',
					backgroundColor:'#f2f3f5',
					borderRadius: '5px',
					padding:'5px 10px',
					margin: '0',
					border:'0px solid #ffffff',
				}">
					{{invest.investTime ? invest.investTime : '请选择日期'}}
					<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
				</u-button>
				<u-input :boder='true' v-model='invest.investMoney' :custom-style="{
							margin:'0 31px'
						}"
						placeholder="请输入金额"></u-input>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default{  //项目推进item组件
	name:"Poject_tj_item",
	props:{
		itemData:{  //item数据
			type:Object,
			default:()=>{
				return {};
			},
		},
	},
	data(){
		return{
			statePercent:0,
			params: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
			invest:{
				investMoney: '',
				investTime: '',
				projectId: '',
			},
			endShow:false,
			modalShow:false,
		}
	},
	filters:{
		getState(data){
			const state ={
				0: '前期工作',
				1: '实施阶段',
				2: '竣工阶段',
				3: '结算阶段',
				4: '移交阶段',
				5: '效益评估',
				100:'已完成',
			}
			return state[data]
		}
	},
	methods:{
		go_object_jd(value){ //跳转到项目进度页面
			uni.navigateTo({
			    url: `/pages/project_jd_lc/project_jd_lc?item=${JSON.stringify(value)}`,
			});
		},
		openModal(val){
			this.modalShow = true
			this.invest.projectId = val.id
		},
		getEndTime(val) {			
			this.endShow = true			
		},
		ensureEndTime(data){
			this.invest.investTime = data.year + '-' + data.month + '-' + '01'
		},
		confirmLeader(){
			this.invest.investMoney = +this.invest.investMoney
			this.$ajax({
				url:'/wx/project/invest',
				method:'POST',
				data:this.invest,
				success:(res) =>{
					if(res.data.state !== 200){
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
						})
					}else{
						this.invest = {
							investMoney: '',
							investTime: '',
							projectId: '',
						},
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success',
						})
						for(let i = 0; i < this.dataList.length; i++){
							let item = this.dataList[i]
							if(item.id == res.data.data.id){
								item.other.yearRatio = res.data.data.other.yearRatio
								item.other.ratio = res.data.data.other.ratio
								break
							}
						}
					}
				}
			})
		},
		// getRatio(val){
		// 	console.log('678')
		// 	if(val.investTotal == 0){
		// 		return 100
		// 	}
		// 	if(val.investedTotal && val.investTotal){
		// 		let ratio = val.investedTotal / val.investTotal > 1 ? 1 : val.investedTotal / val.investTotal
		// 		return (ratio * 100).toFixed(2)
		// 	}
		// 	return 0
		// },
		// getYearRatio(val){
		// 	console.log(val)
		// 	if(val.annualInvest && val.expectAnnualInvest){
		// 		let date = new Date().getFullYear() + '年'
		// 		let nowMoney = JSON.parse(val.annualInvest)[date]
		// 		let yeayMoney = JSON.parse(val.expectAnnualInvest)[date]
		// 		if(yeayMoney == 0){
		// 			return 100
		// 		}
		// 		if(nowMoney && yeayMoney){
		// 			let ratio = nowMoney / yeayMoney > 1 ? 1 : nowMoney / yeayMoney
		// 			return (ratio * 100).toFixed(2)
		// 		}
		// 	}
		// 	return 0
		// },
	},
	created(){
		
	},
}
</script>

<style lang="scss" scoped>
.noData{
	position: absolute;	
}
.project_tj_item{
	width: 100%;
	background-color: #ffffff;
	height:fit-content;
	@include flex_layout_column;
	align-items: stretch;
	padding: 10px 15px 10px 15px;
	border-bottom: 1px solid #e4e9ea;
	box-sizing: border-box;
	.top{
		font-size: 14px;
		line-height: 20px;
		color: #323232;
		font-weight: bold;
		margin-bottom: 5px;
		u-tag{
			margin-left: 5px;
		}
	}
	.bottom{
		margin-top: 10px;
		width: 100%;
		@include flex_layout_row;
		justify-content: space-between;
		align-items: flex-end;
		border-bottom: 1px solid #f0f0f0;
		font-size: 12px;
		color: #757575;
		padding-bottom: 10px;
	}
}
.flexContainer{
	/deep/ u-tag{
		display: inline-block;
		margin-right: 10px;		
		margin-top: 10px;
	}
	
}
.progessContainer{
	margin-top: 10px;
	>view{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		>view{
			margin-right: 5px;
		}
		u-line-progress{
			flex: 1.8;
			/deep/ .u-progress{
				vertical-align: middle;
			}
		}
	}
}
.modalContainer{
	margin-top: 20px;
	>/deep/ u-input{
		>view{
			margin-top:10px;
		}
	}
}
</style>
